<template>
  <view class="no-data" :class="{ fill: props.fill }">
    <view class="f">
      <image class="no-image" mode="aspectFix" :src="newSrc" />
      <view class="no-text">{{ text }}</view>
      <slot></slot>
    </view>
  </view>
</template>
<script setup>
import { View, Image } from '@tarojs/components';
import { onMounted, computed } from 'vue';
const props = defineProps({
  fill: {
    type: Boolean,
    default: true
  },
  text: {
    type: String,
    default: '暂无数据'
  },
  src: String
});

const newSrc = computed(() => {
  if (!props.src) {
    return '/assets/imgs/default/no-data.png';
  }
  if (props.src.startsWith('/') || props.src.startsWith('http')) {
    return props.src;
  } else {
    return '/assets/imgs/default/' + props.src;
  }
});
</script>
<style lang="scss">
.no-data {
  text-align: center;
  &.fill {
    height: calc(100vh - var(--safe-bottom) - var(--safe-head));
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    .f {
      padding-bottom: 200px;
    }
  }
  .no-image {
    margin: auto;
    height: 500px;
    width: 500px;
  }
  .no-text {
    line-height: 80px;
    height: 80px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 28px;
    color: var(--color-gray);
  }
}
</style>
